<template>
  <view>
    <wd-message-box></wd-message-box>
    <wd-toast></wd-toast>
    <view class="mine" v-if="userInfo">
      <!--      <view class="tools">-->
      <!--        <wd-icon name="scan" size="48rpx" color="#292C39" @click="doScan"></wd-icon>-->
      <!--        <wd-icon name="setting" size="48rpx" color="#292C39"></wd-icon>-->
      <!--      </view>-->
      <view class="header-height"></view>
      <view class="header">
        <view class="header-user">
<!--          <image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" class="header-user-avatar"></image>-->
          <view class="header-user-nickname">
            <view class="nickname">姓名：{{ userInfo.name }}</view>
            <template v-if="userInfo.type && userInfo.type === 1">
              <view style="display: flex;justify-content: space-between">
                参与项目：
                <wd-button size="small" @click="init">刷新项目</wd-button>
              </view>
              <view class="info" v-for="item in userInfo.xiangmuList">{{ item.COL_3 }}</view>
            </template>
            <template v-else>
              <view style="display: flex;justify-content: space-between">
                参与项目：
                <wd-button size="small" @click="init">刷新项目</wd-button>
              </view>
              <view class="info" v-for="item in userInfo.xiangmuList">{{ item.COL_3 }}</view>
            </template>
          </view>
        </view>
        <view class="header-target">
          <view class="header-target-item" v-for="(item, key) of target" :key="key">
            <text class="label">{{ item.toFixed(2) }}</text>
            <text class="value">{{ key }}</text>
          </view>
        </view>
      </view>
      <view class="main">
        <wd-cell-group border>
          <template v-if="userInfo.type">
            <wd-cell title="提油登记" value="查看" is-link icon="edit" to="/pages/publish/Duizhang" />
            <wd-cell title="查看提油记录" value="查看" is-link icon="spool" to="/pages/home/history" />
            <wd-cell title="司机管理" value="查看" is-link icon="usergroup-add" to="/pages/home/drvier" />
            <wd-cell title="司机加油记录" value="查看" is-link icon="usergroup-add" to="/pages/home/drvierhistory" />
          </template>
          <template v-else>
            <wd-cell title="登记" value="发送票单" is-link icon="edit" to="/pages/publish/Publish" />
            <wd-cell title="记录" value="查看加油记录" is-link icon="spool" to="/pages/home/history" />
          </template>
        </wd-cell-group>
        <wd-cell title="退出当前账号" @click="doLogout" icon="translate-bold" is-link />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMessage, useNotify } from 'wot-design-uni'
import { useToast } from 'wot-design-uni'
import DemoApi from "@/api/DemoApi";
const toast = useToast()
const message = useMessage()
const { userInfo } = storeToRefs(useAuthStore()) // 解构pinia的store
console.log(userInfo.value)
try {
  userInfo.value.xiangmuList = userInfo.value.xiangmuList ? JSON.parse(userInfo.value.xiangmuList) : []
} catch (e) {
}
const router = useRouter()
const target = ref({})

const init = () => {
  if (userInfo.value.type) {
    DemoApi.leaderLogin({ mobile: userInfo.value.COL_1, name: userInfo.value.name })
        .then((resp) => {
          if (!resp.data.length) {
            toast.close()
            toast.error('账号不存在')
            userInfo.value = {}
            uni.redirectTo({
              url: '/pages/login/Login'
            })
            return
          }
          userInfo.value.xiangmuList = resp.data.map((item) => {
            item.xiangmuList = item.COL_3
            return item
          })
        })
        .catch((error) => {
          toast.close()
          toast.error(error.msg)
        })

    uni.request({
      url: 'https://miniapp.zhangmushiye.com/bi-api/report/dataapi/tiyoutongji',
      method: 'GET',
      data: {
        mobile: userInfo.value.COL_1
      },
      success: (res) => {
        const { count, sumdun, price } = res.data.data[0] || {
          count: 0,
          sumdun: 0,
          price: 0
        }
        target.value = {
          提油次数: count,
          总金额: +price
        }
      }
    })

  } else {

    DemoApi.login({ mobile: userInfo.value.COL_1, name: userInfo.value.name })
        .then((resp) => {
          if (!resp.data.length) {
            toast.close()
            toast.error('账号不存在')
            userInfo.value = {}
            uni.redirectTo({
              url: '/pages/login/Login'
            })
            return
          }
        })
        .catch((error) => {
          toast.close()
          toast.error(error.msg)
        })

    uni.request({
      url: 'https://miniapp.zhangmushiye.com/bi-api/report/dataapi/driverXiangmu',
      method: 'GET',
      data: {
        phone: userInfo.value.COL_1
      },
      success: (res) => {
        userInfo.value.xiangmuList = res.data.data
      }
    })

    uni.request({
      url: 'https://miniapp.zhangmushiye.com/bi-api/report/dataapi/driverStatic',
      method: 'GET',
      data: {
        name: userInfo.value.name
      },
      success: (res) => {
        const { count, sumdun, price } = res.data.data[0]|| {
          count: 0,
          sumdun: 0,
          price: 0
        }
        target.value = {
          加油次数: count,
          总金额: +price
        }
      }
    })
  }
}

init()
/**
 * 扫码
 */
function doScan() {
  uni.scanCode({
    success: (res) => {
      // 扫码内容
      const code: string = res.result || ''
      toast.show(`扫码内容：${code}`)
    }
  })
}

/**
 * 登出
 */
function doLogout() {
  message
    .confirm({ title: '提示', msg: '确认退出当前登录账号吗？' })
    .then(() => {
      // 点击的确认按钮
      useAuthStore().logout()
      router.replaceAll({ name: 'login' })
    })
    .catch((error) => {
      console.log(error)
    })
}
</script>

<style lang="scss" scoped>
.mine {
  min-height: calc(100vh - var(--window-top) - var(--window-bottom));
  width: 100vw;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.9);
  padding: 0 24rpx 24rpx;
  background-image: url('https://pic.imgdb.cn/item/65796604c458853aef1aec2a.jpg');
  background-size: 100% 100%;
  .header-height {
    height: 320rpx;
  }
  .tools {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32rpx;
    box-sizing: border-box;
    padding: 0 12rpx;
  }
  .header {
    width: 100%;
    border-radius: 16rpx 16rpx 0 0;
    padding: 32rpx;
    box-sizing: border-box;
    //margin-bottom: 24rpx;
    color: #4c4a4b;
    background: rgba(255, 255, 255, 0.9);
    &-user {
      display: flex;
      margin-bottom: 56rpx;
      &-avatar {
        flex: 0 0 auto;
        border-radius: 50%;
        width: 128rpx;
        height: 128rpx;
        overflow: hidden;
      }
      &-nickname {
        flex: 1 1 auto;
        margin-left: 32rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .nickname {
          font-weight: 550;
          font-size: 32rpx;
          margin-bottom: 12rpx;
        }
        .info {
          font-size: 26rpx;
        }
      }
      &-more {
        flex: 0 0 auto;
        width: 48rpx;
      }
    }

    &-target {
      display: flex;
      justify-content: space-around;
      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        .label {
          font-size: 32rpx;
          font-weight: 550;
          margin-bottom: 24rpx;
        }
        .value {
          font-size: 28rpx;
        }
      }
    }
  }
  .main {
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius:0 0 16rpx 16rpx;
    padding: 12rpx 12rpx;
    box-sizing: border-box;
    border-top: 1px solid #e8e8e8;
  }
}
:deep(.wd-cell-group){
  background: transparent !important;
}
:deep(.wd-cell-group__body){
  background: transparent !important;
}
:deep(.wd-cell){
  background-color: transparent !important;
}
</style>
